<template>
	<view class="order-container" :data-theme="themeStyle">
		<!-- 导航栏 -->
		<!-- #ifdef H5 -->
		<view class="head-nav ns-bg-color"></view>
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<view class="head-nav ns-bg-color" :class="{ active: isIphoneX }"></view>
		<!-- #endif -->
		<view class="head-return ns-bg-color" @click="navigateBack()">
			<text class="iconfont iconback_light"></text>
			{{ $lang('title') }}
		</view>
		 <view class="payment-top ns-bg-color"></view>
		 <!-- 物流配送方式信息 -->
		 <view class="store-wrap" v-if="orderPaymentData.exchange_info.type == 1">
		 	<view v-if="orderPaymentData.is_virtual == 0 && orderPaymentData.express_type.length > 1" class="tabs">
		 		<view
		 			class="ns-bg-color"
		 			v-for="(deliveryItem, deliveryIndex) in orderPaymentData.express_type"
		 			:key="deliveryIndex"
		 			:class="{ 'active ns-text-color': deliveryItem.name == orderPaymentData.delivery.delivery_type }"
		 			@click="selectDeliveryType(deliveryItem)"
		 		>
		 			<view class="content">{{ deliveryItem.title }}</view>
		 		</view>
		 	</view>
		 	<!-- 选择地址 -->
		 	<view class="delivery-box" @click="selectAddress" v-if="orderPaymentData.is_virtual == 0 && orderPaymentData.delivery.delivery_type != 'store'">
		 		<view>
		 			<view class="store-info" v-if="orderPaymentData.member_address">
		 				<view class="icon ns-bg-color"><view class="iconfont icondingwei1 ns-font-size-lg"></view></view>
		 				<view class="store-info-detail">
		 					<view>
		 						<text class="ns-margin-right">收货人：{{ orderPaymentData.member_address.name }}</text>
		 						<text>{{ orderPaymentData.member_address.mobile }}</text>
		 					</view>
		 					<view class="store-detail">
		 						<view class="ns-text-color-gray">收货地址：{{ orderPaymentData.member_address.full_address }} {{ orderPaymentData.member_address.address }}</view>
		 					</view>
		 				</view>
		 				<view class="cell-more"><view class="iconfont iconright"></view></view>
		 			</view>
		 			<view class="store-info" v-else>
		 				<view class="icon ns-bg-color"><view class="iconfont icondingwei1 ns-font-size-lg"></view></view>
		 				<view class="store-info-detail">
		 					<view class="ns-text-color">前去设置</view>
		 					<view>您还没有设置收货地址</view>
		 				</view>
		 				<view class="cell-more"><view class="iconfont iconright"></view></view>
		 			</view>
		 		</view>
		 		<picker
		 			v-if="orderPaymentData.delivery.delivery_type == 'local' && timeInfo.showTimeBar && orderPaymentData.member_address"
		 			@click.stop=""
		 			mode="time"
		 			@change="bindTimeChange"
		 		>
		 			<view class="pick-block">
		 				<!-- <view v-if="canLocalDelicery">
		 					<text>营业时间：&nbsp;</text><text>{{timeInfo.start_time +'-'+ timeInfo.end_time}}</text>
		 				</view>
		 				<view v-else>本店今日休息</view> -->
						<view>送达时间</view>
		 				<view class="time-picker">
		 					<view>{{ orderCreateData.buyer_ask_delivery_time }}</view>
		 					<text class="iconfont iconright ns-text-color-gray"></text>
		 				</view>
		 			</view>
		 		</picker>
		 	</view>
		 
		 	<!-- 选择门店 -->
		 	<view class="delivery-box" v-if="orderPaymentData.is_virtual == 0 && orderPaymentData.delivery.delivery_type == 'store'">
		 		<view>
		 			<view @click="openSiteDelivery" class="store-info" v-if="storeInfo.currStore">
		 				<view class="icon ns-bg-color" v-if="!storeInfo.currStore.store_image"><view class="iconfont iconmendian"></view></view>
		 				<view class="icon image-icon" v-else><image :src="$util.img(storeInfo.currStore.store_image)" mode="aspectFill"></image></view>
		 				<view class="store-info-detail">
		 					<view>
		 						<text>{{ storeInfo.currStore.store_name }}</text>
		 						<text></text>
		 					</view>
		 					<view class="store-detail">
		 						<view class="ns-text-color-gray" v-if="storeInfo.currStore.open_date">营业时间：{{ storeInfo.currStore.open_date }}</view>
		 						<view class="ns-text-color-gray">地址：{{ storeInfo.currStore.full_address }} {{ storeInfo.currStore.address }}</view>
		 					</view>
		 				</view>
		 				<view class="cell-more"><view class="iconfont iconright"></view></view>
		 			</view>
		 			<view v-else>
		 				<view class="address-empty"><view class="ns-text-color">当前无自提门店！请选择其它配送方式</view></view>
		 			</view>
		 		</view>
		 		<view v-if="storeInfo.currStore" @click.stop="" class="pick-block">
		 			<view>预留手机</view>
		 			<input class="text-right" type="number" placeholder="请输入手机号" v-model="member_address.mobile" />
		 		</view>
		 	</view>
		 </view>
		<!-- 虚拟商品展示 -->
		<view class="mobile-wrap" v-if="orderPaymentData.is_virtual == 1">
			<view class="icon ns-bg-color"><view class="iconfont iconshouji1 ns-font-size-xx-lg"></view></view>
			<view class="mobile-info">
				<view class="tips ns-text-color ns-font-size-sm">购买虚拟类商品需填写您的手机号，以方便商家与您联系</view>
				<view class="form-group">
					<view class="form-item">
						<text class="text">手机号码</text>
						<input
							type="number"
							value=""
							maxlength="11"
							placeholder="请输入您的手机号码"
							placeholder-class="ns-text-color-gray placeholder"
							class="input"
							v-model="orderCreateData.member_address.mobile"
						/>
					</view>
				</view>
			</view>
		</view>

		<!-- 店铺 -->
		<view class="site-wrap" :class="orderPaymentData.exchange_info.type == 2 || orderPaymentData.exchange_info.type == 3 ? 'margin-top' : ''">
			<view class="site-body">
				<view class="goods-wrap">
					<block v-if="orderPaymentData.exchange_info.type == 2">
						<view class="goods-img">
							<image
								:src="
									$util.img(orderPaymentData.exchange_info.image) ? $util.img(orderPaymentData.exchange_info.image) : $util.img('upload/uniapp/point/coupon.png')
								"
								@error="imageError(index)"
								mode="aspectFill"
							></image>
						</view>
					</block>
					<block v-else-if="orderPaymentData.exchange_info.type == 3">
						<view class="goods-img">
							<image
								:src="
									$util.img(orderPaymentData.exchange_info.image) ? $util.img(orderPaymentData.exchange_info.image) : $util.img('upload/uniapp/point/hongbao.png')
								"
								@error="imageError(index)"
								mode="aspectFill"
							></image>
						</view>
					</block>
					<block v-else>
						<view class="goods-img"><image :src="$util.img(orderPaymentData.exchange_info.image)" @error="imageError(index)" mode="aspectFill"></image></view>
					</block>
					<view class="goods-info">
						<view class="goods-name">{{ orderPaymentData.exchange_info.name }}</view>
						<view class="goods-sub-section">
							<view v-if="orderPaymentData.exchange_info.pay_type == 1">
								<text class="goods-price ns-text-color">{{ orderPaymentData.exchange_info.point }}积分</text>
								<text class="goods-price ns-text-color" v-if="orderPaymentData.exchange_info.price != '0.00'">+￥{{ orderPaymentData.exchange_info.price }}</text>
							</view>
							<view>
								<text>
									<text class="iconfont iconclose"></text>
									{{ orderPaymentData.num }}
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="site-footer">
				<!-- <block v-if="orderPaymentData.is_virtual == 0">  
					<view class="order-cell">
						<text class="tit">配送方式</text>
						<block v-if="orderPaymentData.express_type.length">
							<view class="box" @click="openSiteDelivery()">
								<text class="ns-text-color-gray">{{ orderPaymentData.delivery.delivery_type_name }}</text>
							</view>
							<text class="iconfont iconright"></text>
						</block>
						<block v-else-if="!orderPaymentData.member_address">
							<view class="box"><text class="ns-text-color">请先填写收货地址</text></view>
						</block>
						<block v-else>
							<view class="box"><text class="ns-text-color">商家未配置配送方式</text></view>
						</block>
					</view>
				</block> -->
				<view class="order-cell">
					<text class="tit">买家留言</text>
					<view class="box">
						<input
							type="text"
							value=""
							placeholder="留言前建议先与商家协调一致"
							class="ns-text-color-gray"
							placeholder-class="ns-text-color-gray"
							v-model="orderCreateData.buyer_message"
						/>
					</view>
				</view>
			</view>
		</view>

		<!-- 金额 -->
		<view class="order-money">
			<view class="order-cell">
				<text class="tit">所需积分</text>
				<view class="box align-right">
					<text class="ns-text-color-black ns-text-color">{{ orderPaymentData.point }}积分</text>
					<!-- <text class="goods-price ns-text-color" v-if="orderPaymentData.exchange_info.price != '0.00'">+￥{{ orderPaymentData.exchange_info.price }}</text> -->
				</view>
			</view>
		</view>

		<view class="order-submit" :class="{ 'bottom-safe-area': isIphoneX }">
			<view class="order-settlement-info">
				<text class="ns-text-color-gray">共{{ orderPaymentData.num }}件，</text>
				<text>合计：</text>
				<text class="ns-text-color">
					<text class="money">{{ orderPaymentData.point }}积分</text>
					<text class="money" v-if="orderPaymentData.price != '0.00'">+ {{$lang('common.currencySymbol')}} {{ orderPaymentData.price|moneyFormat }}</text>
				</text>
			</view>
			<view class="submit-btn"><button type="primary"style="background:linear-gradient(270deg, #ff5a01, #ffb644);" size="mini" @click="orderCreate">提交订单</button></view>
		</view>

		<!-- 门店列表弹窗 -->
		<uni-popup ref="deliveryPopup" type="bottom">
			<view class="delivery-popup popup">
				<view class="popup-header">
					<view><text class="tit">已为您甄选出附近所有相关门店</text></view>
					<view class="align-right"><text class="iconfont iconclose uni-bold" @click="closePopup('deliveryPopup')"></text></view>
				</view>
				<view class="popup-body store-popup" :class="{ 'safe-area': isIphoneX }">
					<view class="delivery-cell delivery-cont">
						<view class="pickup-point" v-for="(item, index) in storeInfo.storeList" :key="index" @click="selectPickupPoint(item)">
							<view class="delivery-detail">
								<view class="name" :class="item.store_id == orderPaymentData.delivery.store_id ? 'ns-text-color' : ''">
									<text>{{ item.store_name }}</text>
									<text v-if="item.distance">({{ item.distance }}km)</text>
								</view>
								<view class="info">
									<view :class="item.store_id == orderPaymentData.delivery.store_id ? 'ns-text-color' : ''" class="ns-font-size-sm">营业时间：{{ item.open_date }}</view>
									<view :class="item.store_id == orderPaymentData.delivery.store_id ? 'ns-text-color' : ''" class="ns-font-size-sm">地址：{{ item.full_address }}{{ item.address }}</view>
								</view>
							</view>
							<view class="icon" v-if="item.store_id == orderPaymentData.delivery.store_id"><text class="iconfont iconyuan_checked ns-text-color"></text></view>
						</view>
						<view v-if="!storeInfo.storeList">所选择收货地址附近没有可以自提的门店</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<loading-cover ref="loadingCover"></loading-cover>
		<ns-show-toast></ns-show-toast>
	</view>
</template>

<script>
import payment from '../public/js/payment.js';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import globalConfig from '@/common/js/golbalConfig.js';
import nsShowToast from '@/components/ns-show-toast/ns-show-toast.vue';

export default {
	mixins: [payment, globalConfig],
	components: {
		uniPopup,
		nsShowToast
	},
	data() {
		return {
			defaultImg: ''
		};
	},
	onLoad() {},
	onShow() {
		// 刷新多语言
		this.$langConfig.refresh();
	},
	methods: {}
};
</script>

<style lang="scss">
@import '../public/css/payment.scss';
</style>
<style scoped>
/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
	background: none;
	max-height: unset !important;
	overflow-y: hidden !important;
}
>>> .uni-popup__wrapper {
	border-radius: 20rpx 20rpx 0 0;
}
>>> .uni-popup {
	z-index: 8;
}
</style>
